<template>
    <div id="mainContent">
        <!-- 角色和权限管理 -->
        <el-card class="box-card" style="margin-right:15px;">
            <el-row class="searchBox">
                <el-form :inline="true" size="small" label-width="100px">
                    <el-form-item label="角色名：">
                        <el-input size="small" placeholder="角色名" v-model="keyword"></el-input>
                    </el-form-item>
                    <el-form-item style="margin-left: 20px;">
                        <el-button size="mini" type="primary" @click="search">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row>
                <el-col :span="12" :offset="10" style="text-align: right;">
                    <el-button size="mini" type="primary" @click="addRoles(0, '')">新建</el-button>
                    <el-button size="mini" type="danger" @click="lotDelete(sels)">批量删除</el-button>
                </el-col>
                <el-col :span="1" :offset="1" style="text-align: right;">
                    <jt-table-column-filter :table-key.sync="tableKey" :header-data.sync="tableHeaderArr" :filter-column.sync="filterColumnData"></jt-table-column-filter>
                </el-col>
            </el-row>

            <el-table :data="tableData" :key='tableKey' v-loading="loading" @selection-change="handleSelectionChange" border stripe height="460">
                <el-table-column type="selection" width="50" align="center" :resizable="false"></el-table-column>
                <el-table-column type="index" label="序号" width="50" align="center" :resizable="false"></el-table-column>
                <el-table-column align="center" :key='(item, index)' v-for='(item, index) in filterColumnData' :resizable="false" 
                    :label="getTableHeaderLabel(item)" 
                    :prop="item" 
                    :min-width="getTableColumnWidth(item, index)" 
                    :fixed="getTableColumnFixed(item)" 
                    :sortable="getTableColumnSort(item)">
                    <template slot-scope="scope">
                        <el-button v-if="item === 'role_field1'" type="text" @click="choosePeople(scope.row)">设置拥有人</el-button>
                        <el-button v-else-if="item === 'role_field2'" type="text" @click="choosePermission">设置权限</el-button>
                        <el-tooltip v-else-if="item === 'role_field3'" :content="statusVal(scope.row)" placement="top">
                            <el-switch
                                v-model="scope.row.setting"
                                active-color="#409EFF"
                                inactive-color="#ff4949"
                                active-value="true"
                                inactive-value="false">
                            </el-switch>
                        </el-tooltip>
                        <span v-else>{{scope.row[item]}}</span>
                        <el-button v-if="item === 'role_field4'" size="small" icon="el-icon-edit" @click="addRoles(1, scope.row)"></el-button>
                        <el-button v-if="item === 'role_field4'" type="danger" size="small" icon="el-icon-delete" @click="deleteRow(scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 新增角色 -->
            <add-role :show.sync="showRole" :sort.sync="operateSort" :name.sync="rolename" :rowid.sync="rowOwnerId" @updateTable="updateTable"></add-role>
            <!-- 设置拥有人 -->
            <set-owner :show.sync="showOwner" :rowid.sync="rowOwnerId"></set-owner>
            <!-- 设置权限 -->
            <set-permission :show.sync="showPermission"></set-permission>

            <el-row type="flex" justify="center">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizeArr"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageTotal"></el-pagination>
            </el-row>
        </el-card>
    </div>
</template>

<script>
    import JtTableColumnFilter from 'components/jt-table-column-filter/index';    // 导入表格列筛选组件
    import AddRole from 'dialog/system-manage/role-permission-manage/add-role';
    import SetOwner from 'dialog/system-manage/role-permission-manage/set-owner';
    import SetPermission from 'dialog/system-manage/role-permission-manage/set-permission';
    import { getRolePermissionService, setRoleOperateService, setDeleteLotService } from 'service/system-manage/role-permission-manage'
    export default {
        name: 'RolePermissionManage',
        components: {
            'jt-table-column-filter': JtTableColumnFilter,
            'add-role': AddRole,
            'set-owner': SetOwner,
            'set-permission': SetPermission
        },
        data(){
            return {
                tableData: [],
                showRole: false,    // 新增角色
                showOwner: false,   // 设置拥有人
                showPermission: false,// 设置权限
                loading: false,
                tableKey: 1,
                sels: [],   // 获取选择的表格列
                filterColumnData: [],
                tableHeaderArr: [],
                tableColumnWidth: [160, 210, 220, 220, 160, 160, 160],   //表格列宽度
                pageSizeArr: [10, 20, 50],
                pageSize: 10,
                pageTotal: 20,
                currentPage: 1,
                operateSort: 0,  // 判断dialog打开类型：新增或修改或详情
                rolename: '',     // 若新增将角色名传递给弹框一个字符串，否则传递当前行的值
                keyword: '', // 角色名搜索
                rowOwnerId: '',     // 设置拥有人的行id
                modifyId: ''        // 修改传入的行id
            }
        },
        mounted() {
            this.showList();
        },
        methods: {
            handleSizeChange(val){
                this.pageSize = val;
                this.showList();
            },
            handleCurrentChange(val){
                this.currentPage = val;
                this.showList();
            },
            // 获取表格多选的值
            handleSelectionChange(val){
                this.sels = val;
            },
            // 表头展示
            getTableHeaderLabel(str) {
                return this.getTableSomeValue(str, 'alias');
            },
            // 获取表格列的宽度
            getTableColumnWidth(str, index){
                return this.tableColumnWidth[index];
            },
            // 获取表格列是否是固定的
            getTableColumnFixed(str){
                return this.getTableSomeValue(str, 'fixed', 0);
            },
            // 获取表格列是否排序
            getTableColumnSort(str){
                return this.getTableSomeValue(str, 'sort');
            },
            // 获取表格表头，列宽度，列固定，列排序的值
            getTableSomeValue(str, keyName, isFixed){
                for (var value of this.tableHeaderArr) {
                    if (value['name'] == str) {
                        if(isFixed === 0){  
                            // 如果头部为操作栏
                            if(str == 'role_field4'){
                                return value.fixed == 'false' ? false : "right";
                            }
                        } else {
                            return value[keyName];
                        }
                    }
                }
            },
            // 新增角色
            addRoles(sort, row) {
                if(row != ""){
                    this.rolename = row.role_name;
                }else{
                    this.rolename = '';
                }
                this.operateSort = sort;
                this.rowOwnerId = row.role_id;
                this.showRole = true;
            },
            // 设置拥有人
            choosePeople(row) {
                this.rowOwnerId = row.role_id;
                this.showOwner = true;
            },
            // 设置权限
            choosePermission() {
                this.showPermission = true;
            },
            // 判断表格中角色的状态是启用还是停用
            statusVal(row) {
                return row.setting == "true" ? "启用" : "停用";
            },
            // 更新表格
            updateTable(){
                this.currentPage = 1;
                this.pageSize = 10;
                this.keyword = "";
                this.showList();
            }, 
            // 查询
            search() {
                this.currentPage = 1;
                this.pageSize = 10;
                this.showList();
            }, 
            // 删除行
            deleteRow(row) {
                setRoleOperateService(row.role_id, "", "3") // 参数：role_id, roleName, type
                    .then((res) => {
                        this.showList();
                    });
            },
            // 批量删除
            lotDelete(sels) {
                var selsRow = [];
                for(let item in sels) {
                    selsRow.push(sels[item].role_id);
                }
                setDeleteLotService(selsRow.toString())
                    .then((res) => {
                        this.showList();
                    });
            },
            // 获取数据，初始化，分页，搜索
            showList() {
                this.loading = true;
                getRolePermissionService(this.currentPage, this.pageSize, this.keyword)
                    .then((res) => {
                        // console.log(res)
                        this.tableHeaderArr = res.data.tableHeaderArr;
                        this.tableData = res.data.pd.page.list;
                        this.pageTotal = res.data.pd.page.total;
                        this.loading = false;
                    });
            }
        }
    }
</script>